<template>
	<view class="">
		<!-- 头部 -->
		<view class="header-view">
			<view style="height: 64rpx;"></view>
			<view class="flex-alignItems-center margin-bottom20">
				<image class="img-30 border-radius50" src='../../static/images/logo.png' mode=""></image>
				<view class="fontSize-15 color-fff">无人机</view>
			</view>
			<view class="flex-between margin-bottom20">
				<view class="flex-alignItems-center">
					<u-icon name="map-fill" color="#ffffff" size="16"></u-icon>
					<view class="fontSize-12 color-fff margin-left10">高新区</view>
				</view>
				<view class="flex-alignItems-center">
					<view class="fontSize-12 color-fff">2020-01-02</view>
					<view class="header-icon"></view>
					<view class="fontSize-12 color-fff">14°多云</view>
				</view>
			</view>
			<u-swiper :list="list1"></u-swiper>
		</view>
		<view class="bg-fff padding-30">
			<u-notice-bar :text="text1"></u-notice-bar>
			<view class="margin-top20 flex-between">
				<view class="flex-alignItems-center">
					<view class="item-order-text" v-for="(item,index) in OrderListText" :key="index"
						@click="ChooseOrderText(index)" :class="orderIndex==index?'item-order-TextActive':''">
						{{item.name}}
					</view>
				</view>
				<view class="flex-alignItems-center">
					<view class="fontSize-13 color-999 margin-right20">休息</view>
					<u-switch size="16" v-model="value1"></u-switch>
					<view class="fontSize-13 color-999 margin-left20">订单</view>
				</view>
			</view>
		</view>

		<!-- 接单 -->
		<view class="padding-20">
			<view class="bg-fff padding-20 border-radius20 margin-bottom20">
				<view class="flex-between margin-bottom20">
					<view class="fontSize-13">
						<text style="color: #2F85E4;">农药喷洒</text>
						<text class="color-808080 margin-left20">编号123</text>
					</view>
					<view class="fontSize-13 color-808080">2025-01-02</view>
				</view>
				<!-- 语音发布 -->
				<view class="" v-if="true">
					<view class="flex-alignItems-center">
						<image class="img-100 border-radius50 margin-right20" src='../../static/logo.png' mode="">
						</image>
						<view class="" style="width: 100%;">
							<view class="flex-between flex1 margin-bottom20">
								<view class="flex-alignItems-center">
									<view class="fontSize-15 color-000">刘磊 </view>
								</view>
								<view class="flex-alignItems-center margin-bottom20">
									<view class="fontSize-15 color-000">10km</view>
									<u-icon name="map-fill" color="#2A82E4" size="16"></u-icon>
								</view>
							</view>
							<view class="flex-between margin-bottom20">
								<view class="flex-alignItems-center">
									<u-icon name="phone-fill" color="#2A82E4" size="16"></u-icon>
									<view class="fontSize-15" style="color: #2A82E4;">18000000000</view>
								</view>
								<view class="fontSize-15">
									<text class="color-000">已付定金</text>
									<text style="color: #FF5733;">10元</text>
								</view>
							</view>
						</view>
					</view>
					<view class="fontSize-15 color-000 margin-bottom20">录音</view>
					<view class="flex-between">
						<view></view>
						<view class="flex-alignItems-center" @click="textShow = true">
							<view class="confirm-btn flex-center">接单</view>
						</view>
					</view>
				</view>

				<!-- 文字发布 -->
				<view class="" v-if="false">
					<view class="flex-alignItems-center">
						<image class="img-100 border-radius50 margin-right20" src="../../static/logo.png" mode="">
						</image>
						<view class="" style="width: 100%;">
							<view class="flex-between flex1 margin-bottom20">
								<view class="flex-alignItems-center">
									<view class="fontSize-15 color-000">刘磊 </view>
								</view>
								<view class="flex-alignItems-center margin-bottom20">
									<view class="fontSize-15 color-000">10km</view>
									<u-icon name="map-fill" color="#2A82E4" size="16"></u-icon>
								</view>
							</view>
							<view class="flex-between margin-bottom20">
								<view class="flex-alignItems-center">
									<u-icon name="phone-fill" color="#2A82E4" size="16"></u-icon>
									<view class="fontSize-15" style="color: #2A82E4;">18000000000</view>
								</view>
								<view class="fontSize-15">
									<text class="color-000">已付定金</text>
									<text style="color: #FF5733;">10元</text>
								</view>
							</view>
						</view>
					</view>
					<view class="flex-alignItems-center margin-bottom20">
						<view class="fontSize-15 color-000 margin-right20">作业面积：300亩</view>
						<view class="fontSize-15 color-000">农作物：玉米</view>
					</view>
					<view class="fontSize-15 color-000 margin-bottom20">地址:1232131</view>
					<view class="flex-between">
						<view></view>
						<view class="flex-alignItems-center">
							<view class="confirm-btn flex-center">接单</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view style="height: 200rpx;"></view>
		<view class="padding-20" v-if="false">
			<view class="flex-justAliCenter-column margin-top150">
				<image class="img-120 margin-bottom30" src="../../static/images/null.png" mode=""></image>
				<view class="fontSize-13 color-999 margin-bottom30">暂无数据</view>
				<view class="list-btn">发布需求</view>
			</view>
		</view>

		<!-- 语音发布弹窗 -->
		<u-popup :show="yuyinShow" @close="yuyinShow = false" mode="center" round="20" bgColor="#FFEFBA" closeable>
			<view class="popup-text-view">
				<view class="flex-alignItems-center margin-top20">
					<image style="width: 50rpx;height: 28rpx;" src='../../static/images1/04.png' mode=""></image>
					<view class="fontSize-15 margin-left20" style="color: #FF5733;">平台派单</view>
				</view>
				<view class="flex-alignItems-center">
					<image class="img-100 border-radius50 margin-right20" src='../../static/logo.png' mode="">
					</image>
					<view class="" style="width: 100%;">
						<view class="flex-between flex1 margin-bottom20">
							<view class="flex-alignItems-center">
								<view class="fontSize-15 color-000">刘磊 </view>
							</view>
							<view class="flex-alignItems-center margin-bottom20">
								<view class="fontSize-15 color-000">10km</view>
								<u-icon name="map-fill" color="#2A82E4" size="16"></u-icon>
							</view>
						</view>
						<view class="flex-between margin-bottom20">
							<view class="flex-alignItems-center">
								<u-icon name="phone-fill" color="#2A82E4" size="16"></u-icon>
								<view class="fontSize-15" style="color: #2A82E4;">18000000000</view>
							</view>
							<view class="fontSize-15">
								<text class="color-000">已付定金</text>
								<text style="color: #FF5733;">10元</text>
							</view>
						</view>
					</view>
				</view>
				<view class="fontSize-15 color-000 margin-bottom20">录音</view>
				<view class="flex-between">
					<view></view>
					<view class="flex-alignItems-center" @click="textShow = true">
						<view class="confirm-btn flex-center">接单</view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 文字弹窗 -->
		<u-popup :show="textShow" @close="textShow = false" mode="center" round="20" bgColor="#FFEFBA" closeable>
			<view class="popup-text-view">
				<view class="flex-alignItems-center margin-top20">
					<image style="width: 50rpx;height: 28rpx;" src='../../static/images1/04.png' mode=""></image>
					<view class="fontSize-15 margin-left20" style="color: #FF5733;">平台派单</view>
				</view>
				<view class="flex-alignItems-center">
					<image class="img-100 border-radius50 margin-right20" src="../../static/logo.png" mode="">
					</image>
					<view class="" style="width: 100%;">
						<view class="flex-between flex1 margin-bottom20">
							<view class="flex-alignItems-center">
								<view class="fontSize-15 color-000">刘磊 </view>
							</view>
							<view class="flex-alignItems-center margin-bottom20">
								<view class="fontSize-15 color-000">10km</view>
								<u-icon name="map-fill" color="#2A82E4" size="16"></u-icon>
							</view>
						</view>
						<view class="flex-between margin-bottom20">
							<view class="flex-alignItems-center">
								<u-icon name="phone-fill" color="#2A82E4" size="16"></u-icon>
								<view class="fontSize-15" style="color: #2A82E4;">18000000000</view>
							</view>
							<view class="fontSize-15">
								<text class="color-000">已付定金</text>
								<text style="color: #FF5733;">10元</text>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-alignItems-center margin-bottom20">
					<view class="fontSize-15 color-000 margin-right20">作业面积：300亩</view>
					<view class="fontSize-15 color-000">农作物：玉米</view>
				</view>
				<view class="fontSize-15 color-000 margin-bottom20">地址:1232131</view>
				<view class="flex-between">
					<view></view>
					<view class="flex-alignItems-center">
						<view class="cancel-btn flex-center" @click="jujueShow = true">拒绝</view>
						<view class="confirm-btn flex-center">接单</view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 拒绝理由 -->
		<u-popup :show="jujueShow" @close="jujueShow = false" mode="center" round="20" bgColor="#FFEFBA" closeable>
			<view class="popup-view" style="width: 600rpx;">
				<view class="fontSize-15 color-000 margin-bottom30">拒绝理由</view>
				<view class="margin-bottom30">
					<u--textarea v-model="value3" height="150" placeholder="请输入内容" ></u--textarea>
				</view>
				<view class="flex-center">
					<view class="cancel-btn1 flex-center">拒绝</view>
					<view class="confirm-btn1 flex-center">接单</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				list1: [
					"https://uviewui.com/swiper/swiper1.png",
					"https://uviewui.com/swiper/swiper2.png",
					"https://uviewui.com/swiper/swiper3.png",
				],
				text1: '通知内容',
				releaseShow: false, // 发布选择
				concleShow: false, // 取消原因
				count: 4,
				value: 2,
				value1: false,
				OrderListText: [{
						name: '用户需求'
					},
					{
						name: '附近需求'
					}
				],
				orderIndex: 0,
				textShow: false,
				jujueShow: false,
				yuyinShow: false,
				value3:''
			}
		},
		onLoad() {

		},
		onShow() {
			uni.$on('releasePopup', () => {
				this.releaseShow = true
			})
		},
		methods: {
			ChooseOrderText(index) {
				this.orderIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.confirm-btn1 {
		padding: 5rpx 30rpx;
		width: 100rpx;
		height: 50rpx;
		background-color: #2A82E4;
		border-radius: 30rpx;
		color: #ffffff;
		font-size: 14px;
		margin-left: 20rpx;
	}

	.cancel-btn1 {
		padding: 5rpx 30rpx;
		width: 100rpx;
		height: 50rpx;
		background-color: #A6A6A6;
		border-radius: 30rpx;
		color: #ffffff;
		font-size: 14px;
	}

	.popup-text-view {
		width: 670rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #FFEFBA;
	}

	.item-order-TextActive {
		color: #333333 !important;
	}

	.item-order-text {
		font-size: 13px;
		color: #999999;
		margin-right: 20rpx;
	}

	.kefu-view {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #2A82E4;
		position: fixed;
		bottom: 200rpx;
		right: 30rpx;
		padding: 10rpx;
	}

	.settlement-btn {
		padding: 10rpx 20rpx;
		background-color: #FF5733;
		border-radius: 30rpx;
		color: #ffffff;
		font-size: 12px;
	}

	.settlement-view {
		padding: 20rpx;
		background-color: #FFF9E6;
		border-radius: 10rpx;
	}

	.concle-popup-btn1 {
		padding: 10rpx 40rpx;
		background-color: #2A82E4;
		border-radius: 30rpx;
		color: #ffffff;
		font-size: 14px;
	}

	.concle-popup-btn {
		padding: 10rpx 40rpx;
		background-color: #A6A6A6;
		border-radius: 30rpx;
		color: #ffffff;
		font-size: 14px;
		margin-right: 20rpx;
	}

	.confirm-btn {
		padding: 5rpx 30rpx;
		width: 100rpx;
		height: 50rpx;
		background-color: #00BAAD;
		border-radius: 30rpx;
		color: #ffffff;
		font-size: 14px;
		margin-left: 20rpx;
	}

	.cancel-btn {
		padding: 5rpx 30rpx;
		width: 100rpx;
		border: 1px solid #A6A6A6;
		border-radius: 30rpx;
		color: #A6A6A6;
		font-size: 14px;
	}

	.jindu-view {
		padding: 20rpx;
		border-radius: 10rpx;
		border: 1rpx dashed #FF8D1A;
		background-color: #FFFDF5;
	}

	.popup-item1 {
		width: 400rpx;
		height: 100rpx;
		background-color: #00BAAD;
		border-radius: 10px;
		margin: 50rpx 0;
	}

	.popup-item {
		width: 400rpx;
		height: 100rpx;
		background-color: #2A82E4;
		border-radius: 10px;
	}

	.repopup-view {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		width: 500rpx;
		// height: 500rpx;
	}

	.list-btn {
		width: 180rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background: #FF8D1A;
		border-radius: 30rpx;
		color: #ffffff;
		font-size: 28rpx;
	}

	.header-icon {
		width: 1px;
		height: 20rpx;
		background: #ffffff;
		margin: 0 10rpx;
	}

	.img-30 {
		width: 70rpx;
		height: 60rpx;
		flex-shrink: 0;
		margin-right: 10rpx;
	}

	.header-view {
		width: 95%;
		// height: 300rpx;
		padding: 20rpx;
		opacity: 1;
		border-radius: 0px 0px 20rpx 20rpx;
		background: linear-gradient(to bottom, #00BAAD 0%, #8DE0DA 100%);
	}
</style>